<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click.native.prevent="handleCreate">
        添加
      </el-button>
      <el-button style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="majorCategoryId" border stripe
      highlight-current-row style="width: 100%;" :data="listData" @selection-change="handleSelectionChange" :empty-text="emptyText"
      @select-all="handelSelectAll"
      ref="multipleTable">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" prop="majorCategoryId"></el-table-column>
      <el-table-column label="专业分类名称" prop="majorCategoryName"></el-table-column>
      <el-table-column label="专业分类类型" prop="categoryTypeShow"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click.native.prevent="handleEdit(scope.row.majorCategoryId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
  import {
    getList,
    del
  } from '@/api/major_category'
  import {
    errorMsg,
    successMsg
  } from '@/utils/my'

  export default {
    inject: ['reload'],
    data() {
      return {
        listData: [],
        loading: true,
        delRows: [],
        delIds: '',
        emptyText: '暂无任何数据'
      }
    },

    created() {
      this.fetchData()
    },

    methods: {
      handleCreate() {
        this.$router.push({
          path: '/admin/major/category/create'
        })
      },

      handleEdit(id) {
        this.$router.push({
          path: '/admin/major/category/edit/' + id
        })
      },

      fetchData() {
        let that = this
        that.loading = true
        getList().then(res => {
          that.loading = false
          that.listData = res.data
        })
      },

      handelSelectAll(rows) {
        for (let i = 0; i < this.listData.length; i++) {
          let childList = this.listData[i].children
          for (let j = 0; j < childList.length; j++) {
            this.$refs.multipleTable.toggleRowSelection(childList[j])
          }
        }
      },

      handleSelectionChange(rows) {
        this.delRows = rows
        let idArr = []
        for (let i = 0; i < rows.length; i++) {
          idArr.push(rows[i].majorCategoryId)
        }
        this.delIds = idArr.join(',')
      },

      handleDelete() {
        let that = this
        if (that.delIds.length <= 0) {
          return errorMsg('请至少选择一项')
        }
        that.loading = true
        del({
          ids: that.delIds
        }).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          that.reload()
        })
      }
    }
  }
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
